<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Canvas绘制一个圆</title>

	</head>

	<body>
		<canvas id="myCanvas" width="400px" height="400px" style="border: 1px solid blueviolet;"></canvas>
	</body>
	<script type="text/javascript">
		//获取Canvas对象(画布)
		var canvas = document.getElementById("myCanvas");
		if(canvas.getContext) {
			//获取对应的CanvasRenderingContext2D对象(画笔)
			var ctx = canvas.getContext("2d");
			//开始一个新的绘制路径
			ctx.beginPath();
			//设置弧线的颜色为红色
			ctx.strokeStyle = "red";
			var circle = {
				x: 200, //圆心的x轴坐标值
				y: 200, //圆心的y轴坐标值
				r: 100 //圆的半径
			};
			//以canvas中的坐标点(100,100)为圆心，绘制一个半径为70px的圆形
			ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
			//按照指定的路径绘制弧线
			ctx.stroke();
		}
	</script>

</html>
